<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>云收藏</title>
	<base target="_blank">
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
	<el-container>
		<el-header class="title">
			<div class="c900 flex">
				<el-link :underline="false" href="index.html">
					<h1>云收藏</h1>
				</el-link>
				<el-input style="width: auto" placeholder="请输入搜索关键字">
					<el-button slot="append" icon="el-icon-search"></el-button>
				</el-input>
				<div class="flex" v-if="myinfo==null">
					<el-link @click.prevent="showReg=true">注册</el-link>
					<el-link @click.prevent="showLogin=true">登录</el-link>
				</div>
				<div class="flex" v-else>
					<el-avatar :src="myinfo.head"></el-avatar>
					<el-link href="logout">退出</el-link>
				</div>
			</div>
		</el-header>
		<el-main>
			<div class="c900 h100">
				<el-container class="h100">
					<el-aside class="h100">
						<el-menu class="h100" default-active="2">
							<el-menu-item index="1">
								<el-button type="primary" @click="showEdit=true">新增</el-button>
							</el-menu-item>
							<el-menu-item index="2">
								<span>全部 (23)</span>
							</el-menu-item>
							<el-menu-item index="22">
								<span>未分类 (3)</span>
							</el-menu-item>
							<el-menu-item index="23">
								<div class="flex">
									<span>门户 (5)</span>
									<el-button type="text">合并至</el-button>
								</div>
							</el-menu-item>
							<el-menu-item index="3">
								<div class="flex">
									<span>购物 (3)</span>
									<el-button type="text">合并至</el-button>
								</div>
							</el-menu-item>
							<el-menu-item index="4">
								<div class="flex">
									<span>游戏 (12)</span>
									<el-button type="text">合并至</el-button>
								</div>
							</el-menu-item>
							<el-menu-item index="4">
								<span>云图</span>
							</el-menu-item>
						</el-menu>
					</el-aside>
					<el-main>
						<el-card>
							<div slot="header" class="flex">
								<div class="flex">
									<el-link href="https://163.com" :underline="false">
										<div class="flex">
											<img src="">
											<h3>网易</h3>
											https://163.com
										</div>
									</el-link>
									<small>访问量:56</small>
								</div>
								<div>
									<el-button type="text">置顶</el-button>
									<el-button type="text">修改</el-button>
									<el-button type="text">删除</el-button>
								</div>
							</div>
							<div>
								<el-tag size='mini'>门户</el-tag>
								<el-tag size='mini'>新闻</el-tag>
								<el-tag size='mini'>军事</el-tag>
							</div>
							<p>网易（NASDAQ: NTES），1997年由创始人兼CEO丁磊先生在广州创办， [1]2000年在美国纳斯达克股票交易所挂牌上市，是中国领先的互联网技术公司。 [2]在开发互联网应用、服务及其它技术方面，始终保持中国业界领先地位。 [2]本着对中国互联网发展强烈的使命感，缔造美好生活的愿景，网易利用最先进的互联网技术，加强人与人之间信息的交流和共享。</p>
						</el-card>
						<el-card>
							<div slot="header" class="flex">
								<div class="flex">
									<el-link href="https://sina.com" :underline="false">
										<div class="flex">
											<img src="https://img1.baidu.com/it/u=3138590727,72450821&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
											<h3>新浪</h3>
											https://sina.com
										</div>
									</el-link>
									<small>访问量:42</small>
								</div>
								<div>
									<el-button type="text">置顶</el-button>
									<el-button type="text">修改</el-button>
									<el-button type="text">删除</el-button>
								</div>
							</div>
							<div>
								<el-tag size='mini'>门户</el-tag>
								<el-tag size='mini'>娱乐</el-tag>
							</div>
							<p>新浪(NASDAQ: SINA)是一家服务于中国及全球华人社群的领先在线媒体及增值资讯服务提供商。新浪拥有多家地区性网站,以服务大中华地区与海外华人为己任,通过旗下五大业务主线:即提供网络资讯及内容</p>
						</el-card>
						<el-card>
							<div slot="header" class="flex">
								<div class="flex">
									<el-link href="https://sina.com" :underline="false">
										<div class="flex">
											<img src="https://img0.baidu.com/it/u=447433031,4160304780&fm=253&fmt=auto&app=138&f=JPEG?w=285&h=300">
											<h3>XX网站</h3>
											https://xxxx.com
										</div>
									</el-link>
									<small>访问量:8</small>
								</div>
								<div>
									<el-button type="text">置顶</el-button>
									<el-button type="text">修改</el-button>
									<el-button type="text">删除</el-button>
								</div>
							</div>
							<div>
								<el-tag size='mini'>门户</el-tag>
								<el-tag size='mini'>娱乐</el-tag>
							</div>
							<p>??????????????????????????</p>
						</el-card>
					</el-main>
				</el-container>
			</div>
		</el-main>
		<el-footer class="flex title" style="justify-content: center;height: 30px">
			<a href="http://www.hyycinfo.com" target="_blank">源辰信息科技</a>
		</el-footer>
	</el-container>
	<el-dialog title="添加网址" :visible.sync="showEdit">
		<el-form>
			<el-form-item label="名称:" label-width="50px">
				<el-input v-model="fav.name" autocomplete="off" placeholder="网站名称"></el-input>
			</el-form-item>
			<el-form-item label="地址:" label-width="50px">
				<el-input v-model="fav.addr" autocomplete="off" placeholder="输入http开头的网页地址"></el-input>
			</el-form-item>
			<el-form-item label="分类:" label-width="50px">
				<el-input v-model="fav.tags" autocomplete="off" placeholder="每个分类用 ; 号隔开, 例如: 游戏;新闻"></el-input>
			</el-form-item>
			<el-form-item label="图片:" label-width="50px">
				<el-input v-model="fav.image" autocomplete="off" placeholder="输入http开头的网图片地址">
					<el-upload slot="append">
						<el-button>上传图片</el-button>
					</el-upload>
				</el-input>
			</el-form-item>
			<el-form-item label="描述:" label-width="50px">
				<el-input v-model="fav.intro" autocomplete="off" type="textarea" :rows="3" placeholder="输入网站说明, 不超出200个字"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showEdit = false">取 消</el-button>
			<el-button @click="addFav" type="primary">确 定</el-button>
		</div>
	</el-dialog>

	<el-dialog title="登录" :visible.sync="showLogin">
		<el-form>
			<el-form-item label="用户:" label-width="50px">
				<el-input v-model="user.username" autocomplete="off" placeholder="帐号"></el-input>
			</el-form-item>
			<el-form-item label="密码:" label-width="50px">
				<el-input  v-model="user.password" autocomplete="off" placeholder="密码"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showEdit = false">取 消</el-button>
			<el-button type="primary" @click="login">确 定</el-button>
		</div>
	</el-dialog>

	<el-dialog title="注册" :visible.sync="showReg">
		<el-form>
			<el-form-item label="用户:" label-width="50px">
				<el-input v-model="userReg.name" autocomplete="off" placeholder="请输入您的用户名"></el-input>
			</el-form-item>
			<el-form-item label="密码:" label-width="50px">
				<el-input type="password" v-model="userReg.pwd" autocomplete="off" placeholder="输入您的密码"></el-input >
			</el-form-item>
			<el-form-item label="邮箱:" label-width="50px">
				<el-input v-model="userReg.email" autocomplete="off" placeholder="请输入您的邮箱"></el-input>
			</el-form-item>
			<el-form-item label="头像:" label-width="50px">
				<el-input v-model="userReg.head" autocomplete="off" placeholder="输入http开头的网图片地址/上传文件">
					<el-upload slot="append">
						<el-button>上传头像</el-button>
					</el-upload>
				</el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showReg = false">取 消</el-button>
			<el-button @click="reg" type="primary">注 册</el-button>
		</div>
	</el-dialog>

</div>
</body>
<script>
	var v = new Vue({
		el:"#app",
		data:{
			showEdit: false,
			showLogin:false,
			myinfo:null,
			user:{username:"",password:""},
			fav:{name:"",addr:"",intro:"",image:"",tags:""},
			showReg:false,
			userReg:{name:"",pwd:"",head:"",email:""},
		},
		created(){
			axios.get("myinfo").then(res=>{
				if(res.data.code==1){
					this.myinfo=res.data.data;
				}
			})
		},
		methods:{
			login(){
				let params=new URLSearchParams();
				params.append("username",this.user.username);
				params.append("password",this.user.password);
				axios.post("login",params).then(res=>{
					console.log(res);
					if(res.data.code==1){
						this.$message(res.data.msg);
						this.myinfo=res.data.data;
						this.showLogin = false;
					}{
						this.$message(res.data.msg);
					}
				})
			},
			addFav(){
				let params=new URLSearchParams();
				params.append("name",this.fav.name);
				params.append("tags",this.fav.tags);
				params.append("addr",this.fav.addr);
				params.append("image",this.fav.image);
				params.append("intro",this.fav.intro);
				axios.post("addFav",params).then(res=>{
					console.log(res);
					if(res.data.code==1){
						this.$message(res.data.msg);
						this.fav=res.data.data;
						this.showEdit = false;
					}{
						this.$message(res.data.msg);
					}
				})
			},
			reg(){
				let params=new URLSearchParams();
				params.append("name",this.userReg.name);
				params.append("pwd",this.userReg.pwd);
				params.append("email",this.userReg.email);
				params.append("head",this.userReg.head);
				axios.post("reg",params).then(res=>{
					console.log(res);
					if(res.data.code==1){
						this.$message(res.data.msg);
						this.showReg = false;
					}{
						this.$message(res.data.msg);
					}
				})
			},
		}
	})
</script>
<style>
	html,body{
		margin: 0px;
		padding: 0px;
	}
	#app>.el-container>.el-main{
		overflow-x: hidden;
		background-image: url("https://img2.baidu.com/it/u=2076726300,191426335&fm=253&fmt=auto?w=500&h=500");
		background-size: cover;
	}
	.el-main{
		padding: 0px 10px;
	}
	.el-card{
		margin-top: 10px;
	}
	html,body,#app,#app>.el-container{
		height: 100%;
	}
	*{
		transition: all .5s;
	}
	a{
		text-decoration: none;
	}
	.c900{
		width: 1000px;
		margin: auto;
	}
	.title{
		background-color: #0a699999;
		color: #fff;
	}
	.title *{
		color: #fff;
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		gap: 10px;
	}
	.flex>*{
		margin: 0px;
		padding: 0px;
	}
	.center{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	nav{
		display: flex;
		height: 100%;
	}
	nav .el-link{
		padding-inline: 20px;
		font-size: 1em;
	}
	nav .el-link:hover{
		background-color: #99f7;
	}
	img{
		width: 40px;
		height: 40px;
		object-fit: cover;
	}
	.hsc:hover{
		transform: scale(1.1);
		box-shadow: 3px 3px 3px 3px #8888;
	}
	.grid2{
		display: grid;
		grid-template-columns: auto auto;
	}
	.grid3{
		display: grid;
		grid-template-columns: auto auto auto;
	}
	.grid4{
		display: grid;
		grid-template-columns: auto auto auto auto;
	}
	.h100{
		height: 100%;
	}
	small{
		font-size: .7em;
		color: #989
	}
</style>

</html>